<template>
  <div>
    <el-card class="box-card">
      <div class="search">
        <span>查询内容:</span>
        <el-input size="small" placeholder="项目名称/负责人/项目类型/合同额..."></el-input>
        <el-button size="small">查询</el-button>
        <el-button size="small" @click="dialogFormVisible = true">高级查询</el-button>

        <!--弹框-->
        <el-dialog :title="'内容查询'" :width="dialogWidth" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="姓名">
              <el-input type="text" style="width: 60%;margin-left: 25px;" size="small" clearable v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input type="tel" style="width: 60%;" size="small" clearable v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input style="width: 60%;margin-left: 25px;" size="small" clearable v-model="form.department" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input style="width: 60%;margin-left: 25px;" size="small" clearable v-model="form.job" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="dialogFormVisible = false">查  询</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    <el-card shadow="hover">
      <div>
        <span style="width: 80px;margin: 6px 20px;float: left;">人员管理</span>
        <el-button style="float: right;margin-bottom: 4px;" size="small">导出</el-button>
      </div>
      <el-table
          :data="tableData"
          style="width: 100%"
          height="290">
        <el-table-column
            fixed
            type="selection"
            width="55"
            align="center">
        </el-table-column>
        <el-table-column
            fixed
            prop="id"
            label="序号"
            width="80"
            align="center">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="department"
            label="所属部门"
            width="150"
            align="center">
        </el-table-column>
        <el-table-column
            prop="job"
            label="岗位"
            width="300"
            align="center">
        </el-table-column>
        <el-table-column
            prop="team"
            label="所在团队"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            prop="participate"
            label="参与项目数"
            width="120"
            align="center">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100"
            align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "User",
    data(){
      return{
        dialogFormVisible: false,
        dialogWidth: '450px',
        form:{
          name: '',
          phone: '',
          department: '',
          job: '',
        },
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,
        tableData: [{
          id: '1',
          name: '王总',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '2',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '3',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '4',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '5',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '6',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }, {
          id: '7',
          name: 'AAAA',
          phone: '188',
          department: '综合部',
          job: '总经理',
          team: '123456',
          participate: '3',
        }]
      }
    },
    methods:{
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-card{
  font-size: 18px;
  width: 100%;
  margin-bottom: 10px;
  .btn{
    margin-bottom: 10px;
    .el-button{
      margin-left: 10px;
    }
  }
  .search{
    .el-input{
      margin-left: 10px;
      width: 30%;
    }
    .el-button{
      margin-left: 10px;
    }
  }
}
  .block{
    text-align: center;
    padding-top: 10px;
  }
</style>
